<template>
  <el-dialog
    title="二维码"
    :visible.sync="isModalVisible"
    width="30%"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="true"
  >
    <div style="text-align: center;">
      <img src="@/assets/qrcode.png" alt="QR Code" style="width: 200px; height: 200px;">
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    qrCodeUrl: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      isModalVisible: this.visible // 初始化为 prop 的值
    };
  },
  watch: {
    visible(newVal) {
      this.isModalVisible = newVal; // 监听 prop 变化并同步到 data 属性
    },
    isModalVisible(newVal) {
      this.$emit('update:visible', newVal); // 监听 data 属性变化并通知父组件
    }
  }
};
</script>

<style scoped>
/* 可以在这里添加样式 */
</style>